<template>
  <div class="container">
    <el-form :model='searchList' ref='searchList' size='normal'>
      <el-row :gutter='20'>
        <el-col :span='8' :offset='0'>
          <el-form-item label=''>
            <el-input v-model='searchList.name' placeholder="角色名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='8' :offset='0'>
          <el-form-item label=''>
            <el-input v-model='searchList.enname' placeholder=" 英文名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='8' :offset='0'>
          <div class='right'>
            <el-button type='primary' size='medium' @click='onAdd'>新增角色</el-button>
            <el-button type='primary' size='medium' @click='search'>查询</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data='tableData' border stripe :height='offsetHeight' v-loading='loading' ref='table'>
      <el-table-column prop='name' label='名称' align='center'>
      </el-table-column>
      <el-table-column prop='enname' label='英文名' align='center'>
      </el-table-column>
      <el-table-column prop='office_name' label='归属机构' align='center'>
      </el-table-column>
      <el-table-column prop='data_scope_name' label='数据范围' align='center'>
      </el-table-column>
      <el-table-column label='操作' width='300' align='center'>
        <template slot-scope='{row}'>
          <el-button-group>
            <el-button size="small" type="green" @click="onEdit(row)">修改
            </el-button>
            <el-button size="small" type="primary" @click="editUser(row)">分配
            </el-button>
            <el-button size="small" type="warning" @click="editPower(row)">授权</el-button>
            <el-button size="small" type="danger" @click="remove(row.id)">删除
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer title="角色用户信息" :visible.sync="userShow" size="70%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <role :user-params="userParams"></role>
    </el-drawer>

    <el-drawer title="角色信息" :visible.sync="infoShow" size="70%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <info :info-params="infoParams" @cancel="cancel"></info>
    </el-drawer>
    <el-drawer title="菜单信息" :visible.sync="menuShow" size="50%" @close="cancel" center :destroy-on-close="true"
      :wrapperClosable="false">
      <Menu :menu-params="menuParams" @cancel="cancel"></Menu>
    </el-drawer>
  </div>
</template>

<script>
import Role from './user'
import Info from './info'
import Menu from './menu'
export default {
  name: 'SysRole',
  components: {
    Role, Info, Menu
  },
  props: {},
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 210,
      loading: false,
      searchList: {},
      tableData: [],
      menuType: [],
      userShow: false,
      userParams: {},
      infoShow: false,
      infoParams: {},
      menuShow: false,
      menuParams: {},
    }
  },
  created () {
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      const res = await this.$http('sysRoleList', {
        requestType: 'get',
        ...this.searchList
      })
      this.tableData = res
      this.loading = false
    },
    async search () {
      this.init()
    },
    findTree (data, name, path) {
      let result = []
      function getLeaf (data) {
        data.forEach(item => {
          if (!item.children) {
            if (name && path) {
              if (item.name && item.path && item.name.indexOf(name) > -1 && item.path.indexOf(path) > -1) {
                result.push(item)
              }
            } else if (name) {
              if (item.name && item.name.indexOf(name) > -1) {
                result.push(item)
              }
            } else if (path) {
              if (item.path && item.path.indexOf(path) > -1) {
                result.push(item)
              }
            }
          } else {
            getLeaf(item.children)
          }
        })
      }
      getLeaf(data)
      return result
    },
    onAdd () {
      this.infoParams = {}
      this.infoShow = true
    },
    onEdit (item) {
      this.infoParams = {
        id: item.id
      }
      this.infoShow = true
    },
    editUser (item) {
      this.userParams = item
      this.userShow = true
    },
    editPower (item) {
      this.menuParams = {
        id: item.id
      }
      this.menuShow = true
    },
    async remove (id) {
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async (action) => {
        const res = await this.$http('sysRoleMenuDel', {
          id: id,
        })
        this.$tips.success(res.errmsg)
        this.init()
      }).catch(() => {

      })
    },
    cancel () {
      this.infoShow = false
      this.infoParams = {}
      this.userShow = false
      this.userParams = {}
      this.menuShow = false
      this.menuParams = {}
    },
    // 菜单遍历重组结构
    toTree (data, children_key, id_key, pid_key) {
      let child_key = children_key || 'children'
      let id = id_key || 'id'
      let pid = pid_key || 'pid'
      // 删除无用子节点
      data.forEach(item => {
        delete item[child_key]
      })
      // 定义map,给map赋值
      let map = {}
      data.forEach(item => {
        map[item[id]] = item
      })
      // 遍历处理
      let arr = []
      data.forEach(item => {
        // 定义父节点
        let parent = map[item[pid]]
        if (parent) {
          (parent[child_key] || (parent[child_key] = [])).push(item)
        } else {
          arr.push(item)
        }
      })
      return arr
    },

  },
  computed: {
  },
}
</script>
<style lang='scss' scoped>
</style>